<template>
  <div>
    <CommonHeadQueryComponent
      slot="headContent"
      ref="acceptHandleHeadRef"
      :needMoreQuery="true"
      @onSearch="search"
      @onReset="reQuery"
      @myEvent="myEvent"
    >
      <!-- 其他查询条件 -->
      <div slot="more">
        <a-form layout="inline" class="accept_more_operate_moreForm">
          <a-collapse v-model="collapseKey" class="accept_more_operate_moreForm_collapse">
            <a-collapse-panel :show-arrow="false" disabled key="1" style="font-weight: bold">
              <div slot="header" class="accept_more_operate_moreForm_collapse_head">
                <a-row :gutter="48" style="width: 100%">
                  <a-col @click.stop="() => { }" :md="8" :sm="24">
                    <a-form-item label="申请人：">
                      <a-input v-model="queryParam.f_applyname" placeholder="请输入申请人" allowClear />
                    </a-form-item>
                  </a-col>
                  <a-col @click.stop="() => { }" :md="8" :sm="24">
                    <a-form-item label="被申请人：">
                      <a-input v-model="queryParam.f_targetname" placeholder="请输入被申请人" allowClear />
                    </a-form-item>
                  </a-col>
                  <a-col @click.stop="() => { }" :md="8" :sm="24">
                    <a-form-item label="行政行为">
                      <a-select
                        v-model="queryParam.f_prtype"
                        placeholder="请选择行政行为"
                        allowClear
                        style="width: 220px; font-weight: normal">
                        <a-select-option v-for="action in admprEnum" :key="action.value" :value="action.value">
                          {{ action.name }}
                        </a-select-option>
                      </a-select>
                    </a-form-item>
                  </a-col>
                </a-row>
              </div>
              <a-row :gutter="48" style="width: 100%" class="accept_more_operate_moreForm_collapse_body">

                <a-col @click.stop="() => { }" :md="8" :sm="24">
                  <a-form-item label="申请来源">
                    <a-select v-model="queryParam.f_source" placeholder="请选择申请来源" allowClear style="width: 220px">
                      <a-select-option v-for="source in sourceEnum" :key="source.value" :value="source.value">
                        {{ source.name }}
                      </a-select-option>
                    </a-select>
                  </a-form-item>
                </a-col>

                <a-col @click.stop="() => {}" :md="8" :sm="24" style="padding-right: 0px">
                  <a-form-item label="申请时间：" :label-col="{ span: 4 }" :wrapper-col="{ span: 16 }">
                    <a-date-picker
                      v-model="queryParam.f_applystarttime"
                      :style="{ width: 'calc(50% - 10px)' }"
                      placeholder="开始日期"
                      format="YYYY-MM-DD"
                      allowClear
                      @change="applyDateListen()"
                    />
                    ~
                    <a-date-picker
                      v-model="queryParam.f_applyendtime"
                      :style="{ width: 'calc(50% - 10px)' }"
                      placeholder="结束日期"
                      format="YYYY-MM-DD"
                      allowClear
                      @change="applyDateListen()"
                    />
                  </a-form-item>
                </a-col>
              </a-row>
            </a-collapse-panel>
          </a-collapse>
        </a-form>
      </div>

      <template slot="content">
        <div class="accept_content_table">
          <!-- 表格数据 -->
          <a-table
            :scroll="scroll"
            :columns="ucolumns"
            :data-source="listData"
            :pagination="upagination"
            :loading="loading"
            rowKey="applyid"
            @change="tableChange"
            size="middle"
            :bordered="ubordered"
            :rowClassName="rowClassName"
            :components="header"
            ref="table"
            :key="tableCountKey"
          >
            <span slot="serial" slot-scope="text, record, index">
              {{ (upagination.current - 1) * upagination.pageSize + parseInt(index) + 1 }}
            </span>

            <div slot="sourceSlot" slot-scope="text, record" class="overBox" style="width: 100%">
              <a-tooltip placement="topLeft">
                <template slot="title">
                  <span>{{ record.source_text }}</span>
                </template>
                {{ record.source_text }}
              </a-tooltip>
            </div>

            <div slot="statusSlot" slot-scope="text, record" class="overBox" style="width: 100%; text-align: left">
              <a-tooltip placement="topLeft">
                <template slot="title">
                  <span>{{ record.status_text }}</span>
                </template>
                {{ record.status_text }}
                <!-- -待归档 -->
                <span
                  style="color: orangered"
                  v-if="
                    record.status_text == '不予受理' ||
                      record.status_text == '已调解' ||
                      record.status_text == '已撤回' ||
                      record.status_text == '已审理'
                  ">
                  【待归档】
                </span>
              </a-tooltip>
            </div>

            <div slot="prtypeSlot" slot-scope="text, record" class="overBox" style="width: 100%">
              <a-tooltip placement="topLeft">
                <template slot="title">
                  <span>{{ record.prtype_text }}</span>
                </template>
                {{ record.prtype_text }}
              </a-tooltip>
            </div>

            <div slot="reasonSlot" slot-scope="text, record" class="overBox" style="width: 100%; text-align: left">
              <a-tooltip placement="topLeft">
                <template slot="title">
                  <span>{{ record.reason }}</span>
                </template>
                {{ record.reason }}
              </a-tooltip>
            </div>
            <div slot="targetnameSlot" slot-scope="text, record" class="overBox" style="width: 100%; text-align: left">
              <a-tooltip placement="topLeft">
                <template slot="title">
                  <span>{{ record.targetname }}</span>
                </template>
                {{ record.targetname }}
              </a-tooltip>
            </div>
            <div slot="acceptcodeSlot" slot-scope="text, record" class="overBox" style="width: 100%">
              <a-tooltip placement="topLeft">
                <template slot="title">
                  <span>{{ record.acceptcode }}</span>
                </template>
                {{ record.acceptcode }}
              </a-tooltip>
            </div>
            <div slot="applynameSlot" slot-scope="text, record" class="overBox" style="width: 100%; text-align: left">
              <a-tooltip placement="topLeft">
                <template slot="title">
                  <span>{{ record.applyname }}</span>
                </template>
                {{ record.applyname }}
              </a-tooltip>
            </div>

            <div slot="dealNameSlot" slot-scope="text, record" class="beyond_hiding" style="width: 100%; text-align: left">
              <a-tooltip placement="topLeft">
                <template slot="title">
                  <span>{{ dealNameLabel(record) }}</span>
                </template>
                {{ dealNameLabel(record) }}
              </a-tooltip>
            </div>

            <div slot="createtimeSlot" slot-scope="createtime" class="beyond_hiding" style="width: 100%">
              {{ createtime | getTimeFormat('YYYY年M月D日') }}
            </div>

            <div slot="decisiontypeSlot" slot-scope="text, record" class="overBox" style="width: 100%">
              <a-tooltip placement="topLeft">
                <template slot="title">
                  <span>{{ record.decisiontype_text }}</span>
                </template>
                {{ record.decisiontype_text }}
              </a-tooltip>
            </div>

            <div slot="decisiondateSlot" slot-scope="decisiondate" class="beyond_hiding" style="width: 100%">
              {{ decisiondate | getTimeFormat('YYYY年M月D日') }}
            </div>

            <span slot="operation" slot-scope="text, record">
              <template>
                <a href="javascript:;" @click="showHand(record, '4', false)">详情</a>
                <span v-if="endStatus.includes(record.status)">
                  <a-divider type="vertical" />
                  <a @click="showHand(record, '4', true)">处理</a>
                </span>
              </template>
            </span>
          </a-table>
        </div>
      </template>
    </CommonHeadQueryComponent>
  </div>
</template>
<script>
  import drag from '@/components/TableDrag/drag'
  import { queryArchivePage } from '@/api/accept/apl_admreview.js'
  import { St_admreview } from '@/enumeration/St_admreview'
  import storage from 'store'
  import { APP_USER } from '@/store/mutation-types.js'
  import { Tp_applysourceList } from '@/enumeration/Tp_applysource'
  import { Tp_admprList } from '@/enumeration/Tp_admpr'
  import { queryLastTaskidByInstid } from '@/api/archive/apl_archive'
  import { LableTitle } from '@/enumeration/LableTitle'

  const ucolumns = [
    {
      title: '序号',
      width: 50,
      key: 'index',
      align: 'center',
      fixed: 'left',
      scopedSlots: { customRender: 'serial' }
    },
    {
      title: '案号',
      dataIndex: 'acceptcode',
      key: 'acceptcode',
      width: 240,
      align: 'center',
      scopedSlots: { customRender: 'acceptcodeSlot' }
    },
    {
      title: '状态',
      dataIndex: 'status',
      key: 'status',
      width: 180,
      align: 'center',
      scopedSlots: { customRender: 'statusSlot' }
    },
    {
      title: '申请人',
      dataIndex: 'applyname',
      key: 'applyname',
      width: 120,
      align: 'center',
      scopedSlots: { customRender: 'applynameSlot' }
    },
    {
      title: '被申请人',
      dataIndex: 'targetname',
      key: 'targetname',
      width: 220,
      align: 'center',
      scopedSlots: { customRender: 'targetnameSlot' }
    },
    {
      title: '协办人',
      dataIndex: 'dealName',
      key: 'dealName',
      width: 150,
      align: 'center',
      scopedSlots: { customRender: 'dealNameSlot' }
    },
    {
      title: '申请时间',
      dataIndex: 'createtime',
      key: 'createtime',
      width: 120,
      align: 'center',
      scopedSlots: { customRender: 'createtimeSlot' }
    },
    {
      title: '申请来源',
      dataIndex: 'source',
      key: 'source',
      width: 150,
      align: 'center',
      scopedSlots: { customRender: 'sourceSlot' }
    },
    {
      title: '案由',
      dataIndex: 'reason',
      key: 'reason',
      width: 200,
      align: 'center',
      scopedSlots: { customRender: 'reasonSlot' }
    },
    {
      title: '行政行为',
      dataIndex: 'prtype',
      key: 'prtype',
      width: 150,
      align: 'center',
      scopedSlots: { customRender: 'prtypeSlot' }
    },
    {
      title: '决定类型',
      dataIndex: 'decisiontype',
      key: 'decisiontype',
      width: 200,
      align: 'center',
      scopedSlots: { customRender: 'decisiontypeSlot' }
    },
    {
      title: '决定时间',
      dataIndex: 'decisiondate',
      key: 'decisiondate',
      width: 150,
      align: 'center',
      scopedSlots: { customRender: 'decisiondateSlot' }
    },
    {
      title: '操作',
      dataIndex: 'action',
      key: 'action',
      width: 150,
      fixed: 'right',
      align: 'center',
      scopedSlots: { customRender: 'operation' }
    }
  ]
  export default {
    data () {
      return {
        collapseKey: [1], // 折叠面板key
        St_admreview: St_admreview,
        queryParam: {
          f_acceptcode: '', // 案号
          f_applyname: '', // 申请人
          f_targetname: '', // 被申请人
          f_prtype: undefined, // 行政行为
          f_source: undefined, // 申请来源
          f_applystarttime: undefined, // 申请开始时间
          f_applyendtime: undefined, // 申请结束时间
          pageNumber: 1,
          pageSize: 20,
          sort: 'decisiontime',
          order: 'desc',
          f_status: null
        },
        listData: [],
        upagination: {
          // 表格分页参数
          defaultPageSize: 20,
          total: 0,
          current: 1,
          pageSize: 20,
          showTotal: total => `共${total}条数据`,
          showSizeChanger: true,
          showQuickJumper: true,
          pageSizeOptions: ['10', '20', '50', '100']
        },
        loading: false,
        ubordered: true, // 表格边框是否显示
        currentUser: storage.get(APP_USER), // 登录人信息
        sourceEnum: Tp_applysourceList,
        admprEnum: Tp_admprList,
        mixins: [drag],
        header: undefined,
        tableCountKey: 0,
        endStatus: [],
        ucolumns: ucolumns,
        LableTitle: LableTitle,
        scroll: { x: 1000, y: 410 }
      }
    },
    components: {
      CommonHeadQueryComponent: () => import('@/views/accept/component/CommonHeadQueryComponent.vue'),
    },
    computed: {},
    created () {
      let routeParam
        try {
          console.log('this.$route.query.queryParam', this.$route.query.queryParam.TempqueryParam)
          routeParam = JSON.parse(JSON.stringify(this.$route.query.queryParam.TempqueryParam))
          this.queryParam = { ...this.queryParam, ...this.$route.query.queryParam.TempqueryParam }
        } catch {
          console.log('路由传参非json格式')
        }

      const admreviewStatus = []
      for (const key in this.St_admreview) {
        // 排除已归档状态和待提交的案件及为未归档 案件
        if (
          this.St_admreview[key].value !== this.St_admreview['archive'].value &&
          this.St_admreview[key].value !== this.St_admreview['written'].value
        ) {
          admreviewStatus.push(this.St_admreview[key].value)
        }
      }
      this.endStatus = Array.of(
        this.St_admreview['hear'].value,
        this.St_admreview['mediate'].value,
        this.St_admreview['noaccept'].value,
        this.St_admreview['back'].value
      )
      this.queryParam.f_status = admreviewStatus.join(',')
      this.queryList()
      this.headerChange()
    },
    watch: {
      ucolumns: {
        handler (newValue, oldVal) {
          this.headerChange()
        },
        deep: true // 深度监听
      }
    },
    updated () { },
    methods: {
      myEvent (e) {
        if (e) {
          this.scroll.y = this.scroll.y + e
        } else {
          this.scroll.y = 410
        }
      },
      // 搜索
      search (val) {
        if (val) {
          this.queryParam.f_acceptcode = val
        } else {
          this.queryParam.f_acceptcode = null
        }
        this.queryParam.pageNumber = 1
        this.queryList()
      },
      headerChange () {
        console.log('移动后', this.ucolumns)
        this.header = {
          header: {
            cell: drag.methods.initDrag(this.ucolumns)
          }
        }
      },
      setColumns (columns) {
        console.log('重置前', this.ucolumns)
        // tableCountKey自增是为了让表格控件每次销毁强制更新
        this.tableCountKey += 1
        this.ucolumns = columns
        // this.ucolumns = columns
        console.log('重置后', this.ucolumns)
      },
      /**
       * 获取流程任务id
       */
      getTaskId (instid, callBack) {
        queryLastTaskidByInstid({ processinstanceid: instid }).then(res => {
          if (res.code !== 0) {
            this.$message.error('获取流程实例错误')
          } else {
            const taskid = res.data
            callBack(taskid)
          }
        })
      },

      showHand (record, pattern, isEditVal) {
        console.log('record', record)
        this.getTaskId(record.instid, taskid => {
          record.isShowArchive = true
          record.isExecute = true
          record.isExecuteEdit = false
          record.taskid = taskid
          record.pattern = pattern
          record.isEditVal = isEditVal
          record.isDocEditVal = isEditVal
          record.TempqueryParam = this.queryParam
          // 将record存入localstorage
          const storageData = JSON.stringify(record)
          localStorage.setItem('archiveData', storageData)
          this.$router.push({
            path: `/ArriveInfoHandleOperation/${taskid}/4`,
            query: {
              url: '/ArchiveUndoList',
              queryParam: record
            }
          })
        })
      },
      /**
       * 重置查询条件并查询数据
       */
      reQuery () {
        this.queryParam = {
          f_acceptcode: '', // 案号
          f_applyname: '', // 申请人
          f_targetname: '', // 被申请人
          f_prtype: undefined, // 行政行为
          f_source: undefined, // 申请来源
          f_applystarttime: undefined, // 申请开始时间
          f_applyendtime: undefined, // 申请结束时间
          pageNumber: 1,
          pageSize: 20,
          sort: 'decisiontime',
          order: 'desc',
          f_status: null
        }
        const admreviewStatus = []
        for (const key in this.St_admreview) {
          // 排除已归档状态和待提交的案件  及为未归档 案件
          if (
            this.St_admreview[key].value !== this.St_admreview['archive'].value &&
            this.St_admreview[key].value !== this.St_admreview['written'].value
          ) {
            admreviewStatus.push(this.St_admreview[key].value)
          }
        }
        this.queryParam.f_status = admreviewStatus.join(',')
        this.queryList()
      },

      tableChange (upagination, filters, sorter, { currentDataSource }) {
        this.row_idx = upagination.current * upagination.pageSize - upagination.pageSize
        this.queryParam.pageNumber = upagination.current
        this.queryParam.pageSize = upagination.pageSize
        this.queryList()
      },

      queryList () {
        if (this.queryParam.f_acceptcode) {
          this.queryParam.f_acceptcode = this.queryParam.f_acceptcode.toString().trim()
        }
        if (this.queryParam.f_applyname) {
          this.queryParam.f_applyname = this.queryParam.f_applyname.toString().trim()
        }
        if (this.queryParam.f_targetname) {
          this.queryParam.f_targetname = this.queryParam.f_targetname.toString().trim()
        }
        this.loading = true
        queryArchivePage(this.queryParam)
          .then(res => {
            if (res.code !== 0) {
              this.$message.error('获取数据失败')
            } else {
              this.listData = res.data.records
              this.upagination.total = res.data.total
              this.upagination.current = res.data.current
              this.upagination.pageSize = res.data.size
              this.$emit('setTotal', res.data.total)
            }
          })
          .catch(err => {
            this.listData = []
            console.log(err, '获取数据失败')
          })
          .finally(() => {
            this.loading = false
          })
      },

      // 修改对应的状态
      statusLable (val) {
        for (const key in this.St_admreview) {
          if (this.St_admreview[key].value == val) {
            return this.St_admreview[key].name
          }
        }
        return val
      },
      rowClassName (record, index) {
        return index % 2 === 0 ? 'oddRow' : 'evenRow'
      },
      applyDateListen () {
        if (
          this.queryParam.f_applystarttime > this.queryParam.f_applyendtime &&
          this.queryParam.f_applystarttime &&
          this.queryParam.f_applyendtime
        ) {
          this.queryParam.f_applystarttime = undefined
        }
      },
      /**
       * 案件承办人
       * @param {} record
       */
      dealNameLabel (record) {
        if (record.hearfirstname) {
          let dealName = record.hearfirstname
          if (dealName && record.hearsecondname) {
            dealName = dealName + '，' + record.hearsecondname
          }
          return dealName
        } else if (record.acceptfirstname) {
          let dealName = record.acceptfirstname
          if (dealName && record.acceptsecondname) {
            dealName = dealName + '，' + record.acceptsecondname
          }
          return dealName
        }
      }

    }
  }
</script>

<style lang="less" scoped>
  @import '~@/components/TableDrag/style.less';

  .label-div {
    padding: 10px;
    height: 100%;
    display: inline-block;
    width: 100%;
  }

  .label-title {
    float: left;
    font-size: 16px;
    font-weight: bold;
  }

  .add-btn {
    float: right;
    margin-right: 20px;
  }

  .input-single {
    width: 200px;
  }

  .headerdefBox img {
    height: 20px;
    width: 20px;
  }

  .headerdefBox {
    // border: 1px solid red;
    margin: 0 10px 10px 0;
    display: flex;
    justify-content: end;
  }

  .formArea {
    margin-bottom: 30px;
  }

  .collapseArea {
    border: none;

    .ant-collapse-item {
      border-bottom: none;
    }

    /deep/.ant-collapse-content {
      border-top: none;
    }
  }

  /deep/ .ant-collapse-header {
    background-color: #fff;
  }

  .collapseArea_header {
    .ant-form-item {
      margin-bottom: 0;
    }
  }

  .collapseArea_body {
    padding-top: 10px;
    padding: 0 20px 0 0px;
  }

  .overBox {
    width: 90%;
    overflow: hidden;
    /*超出部分隐藏*/
    white-space: nowrap;
    /*不换行*/
    text-overflow: ellipsis;
    /*超出部分文字以...显示*/
  }
  .accept_more_operate_moreForm {
    ::v-deep .ant-form-item-label {
      min-width: 100px;
    }
  }
</style>
